<% question = form.object %>
<% is_expanded = question.errors.any? %>
<div class="card questionnaire-question" id="accordion-<%= id %>-field">
  <div class="form__wrapper" data-controller="accordion">
    <div class="card-divider">
      <h2 class="card-title flex items-center">
        <span>
          <% if editable %>
            <%== icon("drag-move-2-fill") %>
          <% end %>
          <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".question")) %>
        </span>

        <span class="ml-auto flex flex-row-reverse items-center gap-2">
          <button type="button" class="question--collapse <%= "question-error" if is_expanded %>" data-controls="panel-<%= id %>-question-card">
            <span class="icon-collapse">
              <%== icon("arrow-up-s-line", aria_label: t(".collapse"), role: "img") %>
            </span>

            <span class="icon-expand">
              <%== icon("arrow-down-s-line", aria_label: t(".expand"), role: "img") %>
            </span>
          </button>

          <% if editable %>
            <button class="button button__xs button__transparent-secondary small alert remove-question button--title">
              <%= icon("delete-bin-line") %>
              <span class="hidden md:block"><%= t(".remove") %></span>
            </button>
          <% end %>
          </span>
      </h2>
    </div>

    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>" aria-hidden="<%= is_expanded ? "false" : "true" %>">
      <div class="row column">
        <%=
          form.translated(
            :text_field,
            :body,
            tabs_id: id,
            label: t(".statement"),
            disabled: !editable
          )
        %>
      </div>

      <div class="row column">
        <%=
          form.translated(
            :editor,
            :description,
            toolbar: :full,
            tabs_id: id,
            label: t(".description"),
            disabled: !editable
          )
        %>
      </div>

      <div class="row column">
        <%=
          form.check_box(
            :mandatory,
            disabled: !editable,
            label: t("activemodel.attributes.questionnaire_question.mandatory")
          )
        %>
      </div>

      <div class="row column">
        <%=
          form.number_field(
            :max_characters,
            disabled: !editable,
            min: 0,
            label: t("activemodel.attributes.questionnaire_question.max_characters")
          )
        %>
      </div>

      <div class="row column">
        <%=
          form.select(
            :question_type,
            options_from_collection_for_select(question_types, :first, :last, question.question_type),
            {},
            disabled: !editable
          )
        %>
      </div>

      <% if question.persisted? %>
        <%= form.hidden_field :id, disabled: !editable %>
      <% end %>

      <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
      <%= form.hidden_field :deleted, disabled: !editable %>

      <div class="row column">
        <div class="questionnaire-question-matrix-rows" data-template="<%= matrix_row_template_selector %>">
          <div class="questionnaire-question-matrix-rows-list">
            <% question.matrix_rows_by_position.each do |matrix_row| %>
              <%= fields_for "questions[questions][#{question.to_param}][matrix_rows][]", matrix_row do |matrix_row_form| %>
                <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question:, editable: %>
              <% end %>
            <% end %>
          </div>

          <% if editable %>
            <button class="button button__xs button__transparent-secondary mt-4 add-matrix-row"><%= t(".add_matrix_row") %></button>
          <% end %>
        </div>
      </div>

      <div class="questionnaire-question-response-options" data-template="<%= response_option_template_selector %>">
        <div class="questionnaire-question-response-options-list">
          <% question.response_options.each do |response_option| %>
            <%= fields_for "questions[questions][#{question.to_param}][response_options][]", response_option do |response_option_form| %>
              <%= render "decidim/forms/admin/questionnaires/response_option", form: response_option_form, question:, editable: %>
            <% end %>
          <% end %>
        </div>

        <% if editable %>
          <div class="row column">
            <button type="button" class="button button__xs button__transparent-secondary mt-4 add-response-option"><%= t(".add_response_option") %></button>
          </div>
        <% end %>
      </div>

      <div class="row column questionnaire-question-max-choices">
        <%=
          form.select(
            :max_choices,
            (2..question.number_of_options),
            { include_blank: t(".any") },
            disabled: !editable
          )
        %>
      </div>

      <div class="questionnaire-question-display-conditions" data-template="<%= display_condition_template_selector %>">
        <div class="questionnaire-question-display-conditions-list">
          <% question.display_conditions.each do |display_condition| %>
            <%= fields_for "questions[questions][#{question.to_param}][display_conditions][]", display_condition do |display_condition_form| %>
              <%= render "decidim/forms/admin/questionnaires/display_condition", form: display_condition_form, question:, editable: %>
            <% end %>
          <% end %>
        </div>

        <% if editable %>
          <% disabled = !question.persisted? %>
          <div class="row column">
            <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button button__xs button__transparent-secondary mt-4 add-display-condition"><%= t(".add_display_condition") %></button>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
